import { Checkbox, Space, Typography } from 'antd'
import React from 'react'
import { QuestionCheckboxDefaultProps, QuestionCheckboxPropsType } from './interface'

const Component: React.FC<QuestionCheckboxPropsType> = props => {
  const { title, isVertical, list = [] } = { ...QuestionCheckboxDefaultProps, ...props }

  return (
    <div>
      <Typography.Paragraph strong>{title}</Typography.Paragraph>
      <Space direction={isVertical ? 'vertical' : 'horizontal'}>
        {list.map(({ value, text, checked }) => {
          return (
            <Checkbox value={value} key={value} checked={checked}>
              {text}
            </Checkbox>
          )
        })}
      </Space>
    </div>
  )
}

export default Component
